<!DOCTYPE html>
<html>

<head>
  <title>Collabora Online Integration</title>
  <link rel="stylesheet" href="stylesheets/style.css">
</head>

<body>
  <script src="javascripts/wopi.js"></script>

  <div class="vbox">
  <form action="" method="get" target="" id="collabora-online-server-form">
    <div class="vbox">
      <div>
        <label for="collabora-online-server"><b>Collabora Online Server</b></label>
        <input type="text" id="collabora-online-server" name="collabora-online-server" />
        <input type="submit" name="submit" value="Load Collabora Online" />
        or use Collabora Demo Servers:
        <button type="button" id="btnEu">EU</button>
        <button type="button" id="btnUs">US</button>
      </div>
      <b>This example host must be reachable by the chosen Collabora Online Server.<br>
      And if demo.*.collaboraonline.com (EU, US) is being used, this example server must have a publicly valid certificate for HTTPS.</b>
      <div class="vbox framed">
        <div class="hbox">
          <div>
            <label for="css-customization"><b>CSS styling</b></label>
            <br />
            <textarea type="text" id="css-customization" name="css_variables" rows="10" cols="80">
            </textarea>
          </div>
          <div>
            <p>
              Select the edition of Collabora Online you are integrating to
              output default values
              to <a href="https://sdk.collaboraonline.com/docs/theming.html">customise
                the theme</a>.
            </p>
            <div class="hbox">
              <button id="branded-btn">Branded</button><button id="code-btn">CODE</button>
            </div>
            <p>
              For the CODE edition, please refer to
              the <a href="https://github.com/CollaboraOnline/online/blob/master/browser/css/color-palette.css">color
                palette</a> or
              the <a href="https://github.com/CollaboraOnline/online/blob/master/browser/css/color-palette-dark.css">dark
                color palette</a> for the variables you can set.
            </p>
            <p>
              The syntax for the variables is:
            </p>
            <p>
              <tt>variable</tt> <tt>=</tt> <tt>value</tt> <tt>;</tt>
            </p>
            <p>
              For your convenience this demo show them line by line.
            </p>
          </div>
        </div>
        <div>
          <p>The value of the <tt>css_variables</tt> URL query parameter as sent
            in a GET request:</p>
          <pre id="css-variables-preview" class="framed">
          </pre>
        </div>
      </div>
      <div class="vbox framed">
        <div class="grid">
          <div>
            <label for="ui-style">Select the UI mode:</label>
            <select name="ui-mode" id="ui-mode">
              <option value="">Default</option>
              <option value="compact">Classic</option>
              <option value="tabbed">Tabbed</option>
            </select>
          </div>
          <div>
            <label for="ui-theme">Select the UI theme:</label>
            <select name="ui-theme" id="ui-theme">
              <option value="">Default</option>
              <option value="dark">Dark</option>
              <option value="light">Light</option>
            </select>
          </div>
          <div>
            <label for="saved-ui-state">Use saved UI State:</label>
            <input type="checkbox" id="saved-ui-state" name="saved-ui-state" checked />
          </div>
          <div>
            <label for="show-sidebar">Show sidebar (writer):</label>
            <input type="checkbox" id="show-sidebar" name="show-sidebar" checked />
          </div>
          <div>
            <label for="hide-toolbar">Hide toolbar:</label>
            <input type="checkbox" id="hide-toolbar" name="hide-toolbar" />
          </div>
          <div>
            <label for="onscreen-keyboard-hint">Pretend I'm a tablet</label>
            <input type="checkbox" id="onscreen-keyboard-hint" name="onscreen-keyboard-hint" />
          </div>
        </div>
        <div>
          <p>The value of the <tt>ui_defaults</tt> URL query parameter as sent
            in the GET request:</p>
          <pre id="ui-defaults-preview" class="framed">
          </pre>
        </div>
      </div>
    </div>
</form>


<form id="graphic-selection" class="vbox framed">
  <legend><b>Image to insert</b></legend>
  <div>
    <input type="radio" id="graphic-one" name="graphic" onclick="select_graphics(0)" checked />
    <label for="graphic-one">One</label><img src="images/one.png" width=16 height=16>
    <br />
    <input type="radio" id="graphic-two" name="graphic" onclick="select_graphics(1)" />
    <label for="graphic-two">Two</label><img src="images/two.png" width=16 height=16>
    <br />
    <input type="radio" id="graphic-remote" name="graphic" onclick="select_remote_graphic(document.querySelector('#graphic-url').value)" />
    <label for="graphic-remote">Image URL:</label>
    <input type="text" id="graphic-url"/>
  </div>
  <p>Click insert remote image in Collabora Online</p>
</form>

<div style="display: none">
  <form action="" enctype="multipart/form-data" method="post" target="collabora-online-viewer" id="collabora-submit-form">
    <input name="css_variables" value="" type="hidden" id="css-variables"/>
    <input name="ui_defaults" value="" type="hidden" id="ui-defaults"/>
    <input name="access_token" value="" type="hidden" id="access-token"/>
    <input type="submit" value="" />
  </form>
</div>

<iframe id="collabora-online-viewer" name="collabora-online-viewer" height=1000 class="vbox" allow="clipboard-read *; clipboard-write *">
</iframe>

</div>
<script type="text/javascript" src="javascripts/jquery-3.5.1.js"></script>

<script type="text/javascript">

$("#branded-btn").on("click", function() {
  $("#css-customization").val(`--co-primary-element=#4c566a;
--co-primary-element-light=#706aab;
--co-txt-accent=#2e1a47;
--co-primary-text=#ffffff;
--co-border-radius=3px;
--co-body-bg=#ffffff;
--co-color-main-text=#000000;`);
});
$("#branded-btn").form = null

$("#code-btn").on("click", function() {
  $("#css-customization").val(`--color-primary-text=#0ff;
--color-background-document=#ff0;
--color-main-background=#0f0;
--color-border=#00f;
--color-main-text=#f00;
`);
});

let locationOrigin = window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/';
let scheme = window.location.protocol;  // http: | https:

$("#collabora-online-server").val(scheme + "//127.0.0.1:9980");

btnEu.onclick = function(){
  $("#collabora-online-server").val("https://demo.eu.collaboraonline.com");
  $("#collabora-online-server-form").submit();
};
btnUs.onclick = function(){
  $("#collabora-online-server").val("https://demo.us.collaboraonline.com");
  $("#collabora-online-server-form").submit();
};

$("#collabora-online-server-form").submit(function(event) {
  event.preventDefault();
  let wopiClientHost = $("#collabora-online-server").val();
  if (!wopiClientHost) {
    alert('No server address entered');
    return;
  }
  if (!wopiClientHost.startsWith('http')) {
    alert('Warning! You have to specify the scheme protocol too (http|https) for the server address.')
    return;
  }
  if (!wopiClientHost.startsWith(scheme + '//')) {
    alert('Collabora Online server address scheme does not match the current page url scheme');
    return;
  }
  let cssValues = $("#css-customization").val().split('\n').join('').trim();
  let uiDefaults = ""
  let uiMode = $("#ui-mode").val();
  if (uiMode) {
    uiDefaults += `UIMode=${uiMode};`;
  }
  let uiTheme = $("#ui-theme").val();
  if (uiTheme) {
    uiDefaults += `UITheme=${uiTheme};`;
  }
  let savedUIState = $("#saved-ui-state")[0].checked;
  if (!savedUIState) {
    uiDefaults += `SavedUIState=false;`;
  }
  let showSidebar = $("#show-sidebar")[0].checked;
  if (!showSidebar) {
    uiDefaults += `TextSidebar=false;`;
  }
  let onscreenKeyboardHint = $("#onscreen-keyboard-hint")[0].checked;
  if (onscreenKeyboardHint) {
    uiDefaults += "OnscreenKeyboardHint=true;";
  }
  let hideToolbar = $("#hide-toolbar")[0].checked;
  if (hideToolbar) {
    uiDefaults += "TextToolbar=false;";
  }

  $("#css-variables-preview").text(`${encodeURIComponent(cssValues)}`);
  $("#ui-defaults-preview").text(`${encodeURIComponent(uiDefaults)}`);

  let wopiSrc = locationOrigin + 'wopi/files/1';
  $.getJSON("collaboraUrl?server=" + wopiClientHost)
    .done(function( resp ) {
      let wopiClientUrl = resp['url'];
      let accessToken =  resp['token'];
      let wopiUrl = wopiClientUrl + 'WOPISrc=' + encodeURIComponent(wopiSrc);
      $('#collabora-submit-form').attr('action', wopiUrl)
      $('#css-variables').attr('value', cssValues);
      if (uiDefaults) {
        $('#ui-defaults').attr('value', uiDefaults);
      }
      $('#access-token').attr('value', accessToken);
      $('#collabora-submit-form').submit();
    })
    .fail(function( jqxhr, textStatus, error ) {
      let err = textStatus + ", " + error;
      console.log( "Request Failed: " + err );
      alert('Not possible to retrieve the complete Collabora Online url');
    });
})
</script>

</body>

</html>
